<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 栅格</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- 引入 Bootstrap -->
		<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
		<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
		<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
			<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
		<![endif]-->

		<script type="text/javascript" src="jquery-1.8.3.js"></script>
		
	</head>
	<body>
			<h1>Hello, world!</h1>
		<div id="div">
			<ul id="ul">
				<li data-key="北京">北京</li>
				<li data-key="上海">上海</li>
				<li data-key="杭州">杭州</li>
			</ul>
		</div>
<form>
    <p>新的密码：<input type="password" id="newPwd" oninput="validityPwd()" required /></p>
    <p>确认密码：<input type="password" id="newPwdConfirm" oninput="validityPwd()"  /></p>
    <input type="color" />
    <input type="date" />
    <input type="email" />
    <input type="month" />
    <input type="number" value="10" />
    <input type="range" />
    <input type="search" />
    <input type="tel" />
    <input type="time" />
    <input type="url" />
    <input type="week" />
    <meter low="0.25" optimum="0.2" high="0.75" value="0.8"></meter>

    <input type="submit" />
</form>
		<summary>
    2016-04-18天气情况
    <details>
        <p>晴转多云</p>
        <p>13~25°</p>
    </details>
</summary>

		<script>
			//document.getElementById('div').addEventListener('click',function(e){
			//    var value=e.target.attributes['data-key'].value; // 获取目标阶段元素的'data-key'属性的值
			//    console.log(value);
			//});

			$('#div').on('click', 'li', function() {
			    var v = $(this).data('key');
			    console.log(v);
			});

			$('#div').delegate('li', 'click', function() {
			    var v = $(this).data('key');
			    console.log(v);
			});

			var validityPwd = function(){
    var newPwd = document.getElementById('newPwd');
    var newPwdConfirm = document.getElementById('newPwdConfirm');
    if(newPwd.value != newPwdConfirm.value){
        newPwdConfirm.setCustomValidity('两次密码输入不一致');
    }else{
        newPwdConfirm.setCustomValidity('');
    }
}

			
		</script>
		<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
		<script src="https://code.jquery.com/jquery.js"></script>
		<!-- 包括所有已编译的插件 -->
		<script src="js/bootstrap.min.js"></script>
	</body>

</html>